import React from 'react'
import { Grid } from 'react-vant'
import { Failure, Paid, Sign, TodoListO, PendingPayment } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const order = () => {
        navigate('/order')
    }
    return (
        <div>
            <div className='order'>
                <div className='order_top'>
                    <a>我的订单</a>
                </div>
                <div className='order_bottom'>
                    <Grid columnNum="5" iconSize="60px" border={false}>
                        <Grid.Item icon={<Paid style={{ color: '#0f0' }} />} text='待支付' onClick={order} />
                        <Grid.Item icon={<TodoListO style={{ color: '#00f' }} />} text='进行中' onClick={order} />
                        <Grid.Item icon={<Sign style={{ color: '#0ff' }} />} text='已完成' onClick={order} />
                        <Grid.Item icon={<Failure style={{ color: '#ff0' }} />} text='已取消' onClick={order} />
                        <Grid.Item icon={<PendingPayment style={{ color: '#f0f' }} />} text='全部' onClick={order} />
                    </Grid>
                </div>
            </div>
        </div>
    )
}

export default Index
